<template>
  <layout ref="mainContainer">
    <!-- 作业名称 -->
    <template #header>
      <center>
        <van-button
          type="warning"
          round
          style="position: relative;top: 0.2rem;margin-left: 0.3rem;float: left;height: 1rem;"
          @click="toHomeworkListPage"
        >返回</van-button>
        <h2 style="display: inline-block;position: relative;right: 0.5rem;">
          {{ quesInfo.homework? quesInfo.homework.name : '' }}
        </h2>
      </center>
    </template>
    <!-- 题目显示区域 -->
    <choose-question
      v-if="quesParam.qtype === 0"
      :key="quesParam.qidx"
      :question-data="quesInfo.question"
      :submit-data="submitInfo"
      :question-param="quesParam"
      :editable="editable"
      style="margin-left: 5%;width: 90%;height: 91%;"
    />
    <fill-question
      v-if="quesParam.qtype===1"
      :key="quesParam.qidx"
      :question-data="quesInfo.question"
      :submit-data="submitInfo"
      :question-param="quesParam"
      :editable="editable"
      style="margin-left: 5%;width: 90%;height: 91%;"
    />
    <answer-question
      v-if="quesParam.qtype===2"
      :key="quesParam.qidx"
      :question-data="quesInfo.question"
      :submit-data="submitInfo"
      :question-param="quesParam"
      :editable="editable"
      style="margin-left: 5%;width: 90%;height: 92%;"
    />
    <!-- 底部题目导航区域 -->
    <van-nav-bar>
      <template #left>
        <a style="color: #1989fa;">
          <van-icon name="arrow-left" />上一题
        </a>
      </template>
      <template #title>
        <a @click="showQuesList = true">
          <van-icon
            name="wap-nav"
            size="0.8rem"
          />
        </a>
      </template>
      <template #right>
        <a style="color: #1989fa;">
          下一题<van-icon name="arrow" />
        </a>
      </template>
    </van-nav-bar>
    <!-- 题目列表选择弹出层 -->
    <van-popup
      v-model="showQuesList"
      position="bottom"
      style="min-height: 30%; max-height: 70%;"
    >
      <div style="width: 90%;margin-left: 5%;">
        <center>
          <h2>题目列表</h2>
        </center>
        <h3>一、选择题</h3>
        <van-button
          v-for="cid of questionCount.chooseNum"
          :key="cid.key"
          style="width: 18%;margin-left: 2%;margin-bottom: 2%;"
          :class="{['cf-tab-active']:quesParam.qtype === 0 && quesParam.qidx === cid.idx }"
          @click="toQuestionPage(0,cid.idx)"
        > {{ cid.idx + 1 }}</van-button>
        <h3>二、填空题</h3>
        <van-button
          v-for="fid of questionCount.fillNum"
          :key="fid.key"
          style="width: 18%;margin-left: 2%;margin-bottom: 2%;"
          :class="{['cf-tab-active']:quesParam.qtype === 1 && quesParam.qidx === fid.idx }"
          @click="toQuestionPage(1,fid.idx)"
        > {{ fid.idx + 1 }}</van-button>
        <h3>三、问答题</h3>
        <van-button
          v-for="aid of questionCount.answerNum"
          :key="aid.key"
          style="width: 18%;margin-left: 2%;margin-bottom: 2%;"
          :class="{['cf-tab-active']:quesParam.qtype === 2 && quesParam.qidx === aid.idx }"
          @click="toQuestionPage(2,aid.idx)"
        > {{ aid.idx + 1 }}</van-button>
      </div>

    </van-popup>
  </layout>
</template>

<script>
import Layout from '@/views/layout'
import { NavBar, Popup, Row, Col, Sticky } from 'vant'
import ChooseQuestion from '@/views/homework/question/components/ChooseQuestion.vue'
import { randInt } from '@/utils/math'
import FillQuestion from './components/FillQuestion.vue'
import AnswerQuestion from './components/AnswerQuestion.vue'

let vueHook = null

export default {
  name: 'HomeworkQuestion',
  components: {
    Layout,
    ChooseQuestion,
    FillQuestion,
    AnswerQuestion,
    [NavBar.name]: NavBar,
    [Popup.name]: Popup,
    [Row.name]: Row,
    [Col.name]: Col,
    [Sticky.name]: Sticky
  },
  data () {
    return {
      showQuesList: false,
      quesInfo: {}, // 当前题目信息
      quesParam: {}, // 题目相关参数信息
      submitInfo: { // 题目提交信息
      }
    }
  },
  computed: {
    randKey () {
      return randInt(1, 1000)
    },
    questionCount () {
      const cnt = this.$store.state.homework.questionCount
      const data = {}
      data.totalNum = cnt.totalNum
      data.chooseNum = []
      for (let i = 0; i < cnt.chooseNum; i++) {
        data.chooseNum.push({ idx: i, key: randInt(1, 1000) })
      }
      data.fillNum = []
      for (let i = 0; i < cnt.fillNum; i++) {
        data.fillNum.push({ idx: i, key: randInt(1, 1000) })
      }
      data.answerNum = []
      for (let i = 0; i < cnt.answerNum; i++) {
        data.answerNum.push({ idx: i, key: randInt(1, 1000) })
      }
      return data
    },
    editable () { // 题目答案是否可编辑
      return Number.parseInt(this.$route.query.userType) === 1
    }
  },
  watch: {
    $route: {
      immediate: false,
      handler: (nVal, oVal) => {
        //  提交题目修改信息
        const quesParam = {
          qtype: Number.parseInt(oVal.query.qtype),
          qidx: Number.parseInt(oVal.query.qidx),
          stuNo: oVal.query.stuNo
        }
        vueHook.saveSubmitInfo(quesParam)
        // 获取新题目及提交信息
        vueHook.refreshData()
      }
    }
  },
  created () {
    // 获取题目及提交信息
    this.refreshData()
    vueHook = this
  },
  mounted () {

  },
  methods: {
    refreshData () { // 刷新数据
      const param = { qtype: Number.parseInt(this.$route.query.qtype), qidx: Number.parseInt(this.$route.query.qidx) }
      this.quesParam = param
      this.$store.dispatch('homework/getQuesInfo', param).then(data => {
        this.quesInfo = data
        const sub = data.submit
        const ques = data.question
        if (sub) {
          this.submitInfo = Object.assign(sub)
        } else {
          // 提交信息为空，说明是初次提交，使用默认值
          this.submitInfo = {
            id: null,
            questionId: ques.id,
            questionType: param.qtype,
            submitId: null,
            content: '',
            selectedOptions: [],
            blankAnswers: []
          }
          // 如果是填空题，填空相应数量的空格
          if (param.qtype === 1) {
            // eslint-disable-next-line no-unused-vars
            for (let i = 0; i < ques.blankNum; i++) {
              this.submitInfo.blankAnswers.push('')
            }
          }
        }

        this.showQuesList = false
      })
    },
    toQuestionPage (qtype, qidx) {
      this.$router.push({
        name: 'HomeworkQuestion',
        query: {
          qtype: qtype,
          qidx: qidx,
          stuNo: this.$route.query.stuNo,
          courseId: this.$route.query.courseId,
          userType: this.$route.query.userType,
          homeworkId: this.$route.query.homeworkId
        }
      })
    },
    toHomeworkListPage () {
      //  提交题目修改信息
      const quesParam = {
        qtype: Number.parseInt(this.$route.query.qtype),
        qidx: Number.parseInt(this.$route.query.qidx),
        stuNo: this.$route.query.stuNo
      }
      vueHook.saveSubmitInfo(quesParam)
      // 如果是学生， 跳转课程详情页
      if (Number.parseInt(this.$route.query.userType) === 1) {
        this.$router.push({
          name: 'CourseDetail',
          query: {
            courseId: this.$route.query.courseId,
            userType: this.$route.query.userType
          }
        })
        // 如果是教师，跳转作业批阅详情页
      } else {
        this.$router.push({
          name: 'HomeworkCheck',
          query: {
            homeworkId: this.$route.query.homeworkId,
            courseId: this.$route.query.courseId,
            userType: this.$route.query.userType
          }
        })
      }
    },
    saveSubmitInfo (quesParam) { // 保存题目答案修改信息
      // 题目可编辑时需保存修改信息
      if (this.editable) {
        this.$store.dispatch('homework/saveChosseQuesSubmit', { quesParam, submit: this.submitInfo })
          .then(() => {
          }).catch(() => { })
      }
    }
  }
}
</script>

<style scoped lang="less">
.cf-tab-active {
  background: #1989fa;
  border-color: #1989fa;
  color: white;
}
</style>
